<template>
    <section class="order-good-box">
      <div class="good-msg-box"
           v-for="(val,number) in goodList"
           :key="number"
           :class="lineBottom ? 'line-bottom' : ''"
           :style="bgC">
        <img :src="val.imgPath" alt="">
        <div class="good-msg pr inline-block">
          <p>{{val.goodName}}</p>
          <p class="fs12">{{val.goodModel}}</p>
          <p class="pa">￥{{val.price}} <span class="flr">x {{val.goodNum}}</span></p>
        </div>
        <p class="after-sale text-r" v-if="unpaid || afterSale">
          <span v-if="unpaid" class="inline-block text-c color45454D" @click="handleRefund(val)">申请退款</span>
          <span v-if="afterSale" class="inline-block text-c color45454D" @click="handleAfterSale(val)">申请售后</span>
        </p>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        bgC:{
          backgroundColor:this.bgc
        },
      }
    },
    created(){
//      console.log('unpaid-- ',this.unpaid);
//      console.log('afterSale-- ',this.afterSale);
    },
    props:['goodList','bgc','lineBottom','unpaid','afterSale'],
    methods: {
      //退款申请
      handleRefund(item){
        this.$emit('refund',{id:item.id})
      },
      //申请售后
      handleAfterSale(item){
        this.$emit('after-sale',{id:item.id})
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base";

  .good-msg-box{
    width: 100%;
    /*height: 140px;*/
    height:auto;
    padding:12px 15px 10px;
    box-sizing: border-box;

    img{
      width: 80px;
      height: 80px;
      vertical-align: bottom;
    }

    .good-msg{
      width: calc(100% - 86px);
      height: 80px;
      padding-left: 6px;
      box-sizing: border-box;

      p:first-child{
        font-weight: bold;
      }

      p:nth-child(2){
        margin-top: 2px;
        color: #999AA3;
      }

      p:last-child{
        left:0;
        bottom:0;
        width: 100%;
      }
    }

    .after-sale{
      width: 100%;
      height: 44px;
      line-height: 50px;
      clear: both;

      span{
        width: 80px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #C5C5CC;
        border-radius: 14px;
      }
    }
  }
</style>
